<template>
  <el-dialog
    :model-value="modelValue"
    @update:model-value="(value) => emit('update:modelValue', value)"
    :title="isEdit ? '编辑调度运用' : '新增调度运用'"
    width="900px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      size="default"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="调度编号" prop="dispatchNo">
            <el-input v-model="form.dispatchNo" placeholder="请输入调度编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调度日期" prop="dispatchDate">
            <el-date-picker
              v-model="form.dispatchDate"
              type="datetime"
              placeholder="选择调度日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="调度类型" prop="dispatchType">
            <el-select v-model="form.dispatchType" placeholder="选择调度类型" style="width: 100%">
              <el-option label="防洪调度" value="flood_control" />
              <el-option label="供水调度" value="water_supply" />
              <el-option label="发电调度" value="power_generation" />
              <el-option label="生态调度" value="ecological" />
              <el-option label="综合调度" value="comprehensive" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调度级别" prop="dispatchLevel">
            <el-select v-model="form.dispatchLevel" placeholder="选择调度级别" style="width: 100%">
              <el-option label="一级" value="level1" />
              <el-option label="二级" value="level2" />
              <el-option label="三级" value="level3" />
              <el-option label="四级" value="level4" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="水库名称" prop="reservoirName">
            <el-input v-model="form.reservoirName" placeholder="请输入水库名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调度员" prop="dispatcher">
            <el-input v-model="form.dispatcher" placeholder="请输入调度员姓名" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="当前水位" prop="currentWaterLevel">
            <el-input v-model="form.currentWaterLevel" placeholder="请输入当前水位">
              <template #append>m</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目标水位" prop="targetWaterLevel">
            <el-input v-model="form.targetWaterLevel" placeholder="请输入目标水位">
              <template #append>m</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="库容" prop="reservoirCapacity">
            <el-input v-model="form.reservoirCapacity" placeholder="请输入库容">
              <template #append>万m³</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="入库流量" prop="inflowRate">
            <el-input v-model="form.inflowRate" placeholder="请输入入库流量">
              <template #append>m³/s</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出库流量" prop="outflowRate">
            <el-input v-model="form.outflowRate" placeholder="请输入出库流量">
              <template #append>m³/s</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="泄洪流量" prop="spillwayFlow">
            <el-input v-model="form.spillwayFlow" placeholder="请输入泄洪流量">
              <template #append>m³/s</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="闸门开度" prop="gateOpening">
            <el-input v-model="form.gateOpening" placeholder="请输入闸门开度">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发电功率" prop="powerOutput">
            <el-input v-model="form.powerOutput" placeholder="请输入发电功率">
              <template #append>MW</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="天气情况" prop="weatherCondition">
            <el-input v-model="form.weatherCondition" placeholder="请输入天气情况" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="调度原因" prop="dispatchReason">
            <el-input
              v-model="form.dispatchReason"
              type="textarea"
              :rows="3"
              placeholder="请输入调度原因"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="调度措施" prop="dispatchMeasures">
            <el-input
              v-model="form.dispatchMeasures"
              type="textarea"
              :rows="4"
              placeholder="请输入具体调度措施"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="预期效果" prop="expectedEffect">
            <el-input
              v-model="form.expectedEffect"
              type="textarea"
              :rows="3"
              placeholder="请输入预期效果"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="审批人" prop="approver">
            <el-input v-model="form.approver" placeholder="请输入审批人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批状态" prop="approvalStatus">
            <el-select v-model="form.approvalStatus" placeholder="选择审批状态" style="width: 100%">
              <el-option label="待审批" value="pending" />
              <el-option label="已审批" value="approved" />
              <el-option label="已拒绝" value="rejected" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:modelValue', false)">取消</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

interface Props {
  modelValue: boolean
  dispatchData?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  dispatchData: null
})

const emit = defineEmits<Emits>()

const formRef = ref<FormInstance>()
const isEdit = ref(false)

const form = reactive({
  dispatchNo: '',
  dispatchDate: '',
  dispatchType: '',
  dispatchLevel: '',
  reservoirName: '',
  dispatcher: '',
  currentWaterLevel: '',
  targetWaterLevel: '',
  reservoirCapacity: '',
  inflowRate: '',
  outflowRate: '',
  spillwayFlow: '',
  gateOpening: '',
  powerOutput: '',
  weatherCondition: '',
  dispatchReason: '',
  dispatchMeasures: '',
  expectedEffect: '',
  approver: '',
  approvalStatus: '',
  remark: ''
})

const rules: FormRules = {
  dispatchNo: [
    { required: true, message: '请输入调度编号', trigger: 'blur' }
  ],
  dispatchDate: [
    { required: true, message: '请选择调度日期', trigger: 'change' }
  ],
  dispatchType: [
    { required: true, message: '请选择调度类型', trigger: 'change' }
  ],
  dispatchLevel: [
    { required: true, message: '请选择调度级别', trigger: 'change' }
  ],
  reservoirName: [
    { required: true, message: '请输入水库名称', trigger: 'blur' }
  ],
  dispatcher: [
    { required: true, message: '请输入调度员姓名', trigger: 'blur' }
  ],
  currentWaterLevel: [
    { required: true, message: '请输入当前水位', trigger: 'blur' }
  ],
  dispatchReason: [
    { required: true, message: '请输入调度原因', trigger: 'blur' }
  ],
  dispatchMeasures: [
    { required: true, message: '请输入调度措施', trigger: 'blur' }
  ]
}

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    dispatchNo: '',
    dispatchDate: '',
    dispatchType: '',
    dispatchLevel: '',
    reservoirName: '',
    dispatcher: '',
    currentWaterLevel: '',
    targetWaterLevel: '',
    reservoirCapacity: '',
    inflowRate: '',
    outflowRate: '',
    spillwayFlow: '',
    gateOpening: '',
    powerOutput: '',
    weatherCondition: '',
    dispatchReason: '',
    dispatchMeasures: '',
    expectedEffect: '',
    approver: '',
    approvalStatus: '',
    remark: ''
  })
  formRef.value?.clearValidate()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 这里应该调用API保存数据
    console.log('提交表单数据:', form)
    
    ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
    emit('success')
    emit('update:modelValue', false)
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确')
  }
}

// 监听弹窗打开，初始化表单数据
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    if (props.dispatchData) {
      isEdit.value = true
      Object.assign(form, props.dispatchData)
    } else {
      isEdit.value = false
      resetForm()
    }
  }
}, { immediate: true })
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>